<template>
<div class="page-class">
  <div class="fr ac f-14 mb-30">
    <template v-if="!id">
      <span>用户组织：</span>
      <span class="mr-40">{{$store.state.user.organizationname}}</span>
      <span>组织负责人：</span>
      <span class="mr-40">{{$store.state.user.headOfUnit}}</span>
      <span>电话：</span>
      <span class="mr-40">{{$store.state.user.phone}}</span>
    </template>
    <template v-else>
      <span>学校：</span>
      <span class="mr-40">{{detail.schoolname}}</span>
      <span>班级：</span>
      <span class="mr-40">{{detail.classname}}</span>
    </template>
  </div>
  <div class="statistics fr jsb mb-30">
    <div class="item">
      <div class="fr ac mt-25">
        <img src="../../assets/images/risk.png" class="pl-20 pr-20">
        <div class="f1">
          <div class="f-14">风险等级</div>
          <div class="f-24 b mt-5">{{statistics.risklevel}}</div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="fr ac mt-25">
        <img src="../../assets/images/temperature.png" class="pl-20 pr-20">
        <div class="f1">
          <div class="f-14">体温异常</div>
          <div class="f-24 b mt-5">{{statistics.temperature}}</div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="fr ac mt-25">
        <img src="../../assets/images/case.png" class="pl-20 pr-20">
        <div class="f1">
          <div class="f-14">确认病例</div>
          <div class="f-24 b mt-5">{{statistics.confirmrisk}}</div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="fr ac mt-25">
        <img src="../../assets/images/test.png" class="pl-20 pr-20">
        <div class="f1">
          <div class="f-14">核酸检测</div>
          <div class="f-24 b mt-5">{{statistics.testper}}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="fr ac mb-30">
    <span>学情：</span>
    <span class="mr-40">{{detail.study === '1' ? '正常上课' : '停课中'}}</span>
    <el-button type="primary" size="mini" icon="el-icon-s-tools" circle @click="openStudy"/>
  </div>
  <div class="rect card p-20 fr f-14 mb-15">
    <div class="title fajc">测温统计</div>
    <div class="f1 fr jsb">
      <div v-for="item in statistics.temList" :key="item.branchName" class="item oh fc">
        <b class="fajc">{{item.count}}</b>
        <div class="f1 fajc"><i></i>{{item.branchName}}</div>
      </div>
    </div>
  </div>
  <div class="rect card p-20 fr f-14 mb-15">
    <div class="title fajc">隔离统计</div>
    <div class="f1 fr jsb">
      <div v-for="item in statistics.gapList" :key="item.branchName" class="item oh fc">
        <b class="fajc">{{item.count}}</b>
        <div class="f1 fajc"><i></i>{{item.branchName}}</div>
      </div>
    </div>
  </div>
  <div class="rect card p-20 fr f-14 mb-40">
    <div class="title fajc f-12">确诊和其他统计</div>
    <div class="f1 fr jsb">
      <div v-for="item in statistics.confirmList" :key="item.branchName" class="item oh fc">
        <b class="fajc">{{item.count}}</b>
        <div class="f1 fajc"><i></i>{{item.branchName}}</div>
      </div>
    </div>
  </div>
  <h2 class="f-18 mb-30">趋势分析</h2>
  <div class="options fr ac f-14 mb-20">
    <div class="label">时间</div>
    <div class="f1 fr ac">
      <span class="mr-30 a" :class="{ on: trend.isDate === '1' }" @click="changeTime('1')">今天</span>
      <span class="mr-30 a" :class="{ on: trend.isDate === '7' }" @click="changeTime('7')">7天</span>
      <span class="mr-30 a" :class="{ on: trend.isDate === '14' }" @click="changeTime('14')">14天</span>
      <span class="mr-40 a" :class="{ on: trend.isDate === '30' }" @click="changeTime('30')">30天</span>
      <el-date-picker v-model="trend.trendTime" type="daterange" @change="changeDate" format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
    </div>
  </div>
  <div class="options fr ac f-14 mb-30">
    <div class="label">统计项</div>
    <span v-for="item in statisticstypeList" :key="item.code" class="mr-30 a" :class="{ on: trend.statisticstype === item.code }" @click="changeStatisticstype(item)">{{item.name}}</span>
  </div>
  <div v-show="trend.list.length" class="chart" ref="chart"></div>
  <div v-show="!trend.list.length" class="chart fajc">
    <b class="f-24" style="color: #0facf8;">无数据</b>
  </div>

  <h2 class="f-18 mt-40 mb-30">学生概况</h2>
  <div class="options fr ac f-14 mb-20">
    <div class="fr ac">
      <div class="mr-25 nowrap">姓名</div>
      <el-input v-model="students.studentname" class="mr-25"/>
    </div>
    <div class="fr ac">
      <div class="mr-25 nowrap">状态</div>
      <el-select v-model="students.personstate" class="mr-25">
        <el-option label="正常" value="0"/>
        <el-option label="留校观察" value="2"/>
        <el-option label="医疗交接" value="17"/>
        <el-option label="居家隔离" value="7"/>
        <el-option label="医疗隔离" value="5"/>
        <el-option label="复课申请" value="18"/>
        <el-option label="返校复课" value="11"/>
        <el-option label="疑似患者" value="14"/>
      </el-select>
    </div>
    <el-button type="primary" icon="el-icon-search" @click="getStudents">搜索</el-button>
  </div>
  <div class="list">
    <table>
      <thead>
        <th>学生ID</th>
        <th>姓名</th>
        <th>性别</th>
        <th>最新测温</th>
        <th>测温时间</th>
        <th>地点</th>
        <th>当前状态</th>
        <th>学情预警</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="item in students.list" :key="item.personId">
          <td>{{item.personId}}</td>
          <td>{{item.name}}</td>
          <td>{{item.sex | emnu('sex')}}</td>
          <td>{{item.tp}}</td>
          <td>{{item.createtime}}</td>
          <td>{{item.address}}</td>
          <td>{{item.healthstatus}}</td>
          <td>{{item.personstate}}</td>
          <td><span class="a link" @click="$router.push(`/monitorDetails?type=1&personId=${item.personId}`)">详情 ></span></td>
        </tr>
      </tbody>
    </table>
    <div class="page tc mt-30">
      <el-pagination background layout="prev, pager, next" prev-text="上一页" next-text="下一页" :pager-count="5" :page-size="5" :total="students.total" :current-page.sync="students.pagecurrent" @current-change="getStudents"/>
    </div>
  </div>


  <el-dialog title="修改学情" :visible="studyBox.show">
    <div class="tc">
      <el-radio v-model="studyBox.study" label="1">正常上课</el-radio>
      <el-radio v-model="studyBox.study" label="2">停课中</el-radio>
    </div>
    <template #footer>
      <div class="tc">
        <el-button @click="studyBox.show = false">取 消</el-button>
        <el-button type="primary" @click="submitStudy">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</div>
</template>

<script>
import moment from '@/utils/moment'

export default {
  name: 'page-class',
  props: ['id'],
  data () {
    return {
      classinfo: {},
      statistics: {
        risklevel: '',
        temperature: '',
        confirmrisk: '',
        testper: '',
        temList: [],
        gapList: [],
        confirmList: []
      },
      studyBox: {
        show: false,
        study: ''
      },
      statisticstypeList: [
        { name: '测温', code: '1' },
        { name: '体温异常', code: '2' },
        { name: '疑似人数', code: '14' },
        { name: '确诊人数', code: '13' },
        { name: '居家隔离', code: '7' },
        { name: '医疗隔离', code: '5' },
        { name: '康复人数', code: '15' }
      ],
      trend: {
        isToday: '1',
        trendTime: [],
        isDate: '1',
        statisticstype: '1',
        list: [],
        chart: null
      },
      students: {
        studentname: '',
        personstate: '',
        pagecurrent: 1,
        total: 0,
        list: []
      }
    }
  },
  computed: {
    classno () {
      return this.id || this.$store.state.classinfo.classno
    },
    detail () {
      return this.id ? this.classinfo : this.$store.state.classinfo
    }
  },
  methods: {
    getDetail () {
      this.$http('/health/healthInfoStatistics/getClassInfos', {
        classno: this.id
      }).then(
        res => {
          this.classinfo = res.data[0] || {}
        }
      )
    },
    getStatistics () {
      this.$http('/health/healthInfoStatistics/getStatistics', {
        ranklevel: '5',
        provinceno: '',
        cityno: '',
        countyno: '',
        schoolno: '',
        classno: this.classno,
        istoday: '',
        statisticstype: '',
        schoolLevel: '',
        personType: ''
      }).then(
        res => {
          if (res.code == 200) {
            const { data } = res.data[0]

            // 四大块
            this.statistics.risklevel = res.data[0].risklevel
            data.forEach(v => {
              if (v.branchName === '日测温异常') this.statistics.temperature = v.count
              if (v.branchName === '今日确诊') this.statistics.confirmrisk = v.count
              if (v.branchName === '日核酸检测') this.statistics.testper = v.count
            })

            this.statistics.temList = ['日测温', '日测温异常', '日疑似人数', '日康复人数'].map(name => {
              return data.find(v => v.branchName === name) || {}
            })
            this.statistics.gapList = ['日医疗隔离', '日居家隔离', '医疗隔离', '居家隔离'].map(name => {
              return data.find(v => v.branchName === name) || {}
            })
            this.statistics.confirmList = ['今日确诊', '日核酸检测', '确诊人数', '班级总人数'].map(name => {
              return data.find(v => v.branchName === name) || {}
            })
          }
        }
      )
    },
    openStudy () {
      this.studyBox.study = this.detail.study
      this.studyBox.show = true
    },
    submitStudy () {
      this.$http('/health/study/saveOrUpdate', {
        classno: this.classno,
        study: this.studyBox.study
      }).then(
        () => {
          if (this.id) this.classinfo.study = this.studyBox.study
          else this.$store.commit('changeStudy', this.studyBox.study)
          this.$notify.success('保存成功')
          this.studyBox.show = false
        }
      )
    },
    getTrends() {
      this.$http('/health/healthInfoStatistics/getTrends', {
        isdate: this.trend.isDate,
        classno: this.classno,
        istoday: this.trend.isToday,
        statisticstype: this.trend.statisticstype,
        begintime: this.trend.trendTime[0] || '',
        endtime: this.trend.trendTime[1] || ''
      }).then(
        res => {
          if (res.code == 200) {
            this.trend.list = res.data
            this.drawLine(res.data)
          }
        }
      )
    },
    drawLine (data) {
      let x
      let y
      if (this.trend.isToday === '1') {
        x = new Array(24).fill('').map((v, i) => `${i}点`)
        y = new Array(24).fill('').map((v, i) => {
          const item = data.find(item => item.unitime - 0 === i) || {}
          return { name: `${i}点`, value: item.count || 0, data: item }
        })
      } else {
        x = data.sort((a, b) => (new Date(a.unitime) - 0) - (new Date(b.unitime) - 0)).map(v => v.unitime)
        y = data.sort((a, b) => (new Date(a.unitime) - 0) - (new Date(b.unitime) - 0)).map(v => ({ value: v.count, data: v }))
      }
      this.trend.chart.setOption({
        tooltip: {
          trigger: 'axis', //标签
          formatter ([params]) {
            return `${params.name}：${params.value}`
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: x,
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          //设置网格线颜色
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#333'],
              width: 1,
              type: 'solid'
            }
          }
        }],
        series: [{
          type: 'line',
          itemStyle: {
            normal: {
              areaStyle: {
                type: 'default',
                color: '#090f42',
              },
              lineStyle: { //线的颜色
                color: '#2c39ec'
              },
              //以及在折线图每个日期点顶端显示数字
              label: {
                position: 'top',
                textStyle: {
                  color: '#fff'
                }
              }
            },
          },
          data: y
        }]
      })
    },
    changeTime (v) {
      if (v === '1') {
        this.trend.isToday = '1'
      } else {
        this.trend.isToday = '0'
      }
      this.trend.trendTime = []
      this.trend.isDate = v
      this.getTrends()
    },
    changeDate () {
      const begin = this.trend.trendTime[0] || ''
      const end = this.trend.trendTime[1] || ''
      const date = moment().format('yyyy-MM-DD')

      if (begin === date && end === date) this.trend.isToday = '1'
      else this.trend.isToday = '0'

      if (begin && end) this.trend.isDate = '0'
      else this.trend.isDate = '1'
      this.getTrends()
    },
    changeStatisticstype (v) {
      this.trend.statisticstype = v.code
      this.getTrends()
    },
    getStudents () {
      const { students } = this
      return this.$http('/health/healthInfoStatistics/getPersonHealthsPage', {
        studentname: students.studentname,
        personType: '1',
        statisticstype: '1',
        personstate: students.personstate,
        ranklevel: '5',
        pagesize: 5,
        pagecurrent: students.pagecurrent,
        classno: this.classno
      }).then(res => {
        if (res.code == 200) {
          this.students.list = res.data.records
          this.students.total = res.data.total
        }
      })
    }
  },
  created () {
    if (this.id) this.getDetail()
    this.getStatistics()
    this.getStudents()
  },
  mounted () {
    this.trend.chart = this.$echarts.init(this.$refs.chart)
    this.getTrends()
  }
}
</script>

<style lang="less">
.page-class {color: #fff;
  .statistics {
    .item {width: 256px;height: 192px;background: #000418 no-repeat 50% 72px;background-size: 346px;
      img {width: 30px;}
      &:first-child {background-image: url("../../assets/images/t1.png");}
      &:nth-child(2) {background-image: url("../../assets/images/t2.png");}
      &:nth-child(3) {background-image: url("../../assets/images/t3.png");background-position: 50% 26px;}
      &:nth-child(4) {background-image: url("../../assets/images/t4.png");background-position: 50% 80px;}
    }
  }

  .rect {
    .title {width: 16px;writing-mode: vertical-rl;border: 1px solid #192b7c;background-color: #0b1233;border-radius: 4px;padding: 0 8px;letter-spacing: 4px;margin-right: 60px;}
    .item {width: 226px;height: 128px;border: 1px solid #454b66;border-radius: 6px;
      b {height: 80px;font-size: 30px;background-color: #000418;}
      div {background-color: #0b1026;border-top: 1px solid #101944;}
      i {width: 8px;height: 8px;border-radius: 50%;margin-right: 8px;
        &.g {background-color: green;}
        &.y {background-color: yellow;}
        &.b {background-color: blue;}
        &.o {background-color: orange;}
        &.r {background-color: red;}
      }
      &:hover {border-color: #fff;
        b{color: #3440de;}
        div {color: #5862e4;}
        i {background-color: #444ecf;}
      }
    }
  }
  .options {
    .label {width: 100px;}
    .on {color: #00c8f1;}
    .el-date-editor {
      background-color: transparent;
      border-radius: 4px;
      height: 30px;
      i {display: flex;align-items: center;justify-content: center;color: #fff;}
      .el-range-separator {display: flex;align-items: center;justify-content: center;color: #fff;}
      .el-range-input {background-color: transparent;color: #fff;}
    }
  }

  .chart {width: 1100px;height: 340px;background-color: #000418;}

  .list {padding: 20px 0 20px 20px;background-color: #000418;
    table {table-layout: fixed;width: 100%;}
    thead {border-bottom: 2px solid rgba(243, 246, 250, .2);}
    th, td {padding: 20px 12px;font-size: 14px;
      &:first-child {border-right: 2px solid rgba(243, 246, 250, .2);}
      span {cursor: pointer;color: #2a36e0;}
      span + span {margin-left: 30px;}
    }

    th {color: rgba(255, 255, 255, .8);}
    td {text-align: center;}
  }
}
</style>
